<!--
 * @Author: 朱安武 549410045@qq.com
 * @Date: 2023-01-09 15:40:43
 * @LastEditors: 朱安武 549410045@qq.com
 * @LastEditTime: 2023-01-09 16:19:27
 * @FilePath: \pinia-todo-setup\src\components\TodoItem.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="todo">
    <div class="todo-text">{{ todo.content }}</div>
    <div v-if="todo.isFinished">✅</div>
    <button v-else @click="finish(todo.id)">完成</button>
    <button @click="remove(todo.id)">删除</button>
  </div>
</template>
<script setup>
import { useTodoStore  } from '../stores/todo-store' 
defineProps(['todo'])
  
const todoStore = useTodoStore()


const finish = (id)=>{
  todoStore.finished(id)
}

const remove = (id)=>{
  todoStore.remove(id)
}

</script>
<style scoped>
.todo {
  display: flex;
  flex-direction: row;
  border: 1px solid #eee;
  padding: 10px;
}

.todo-text {
  width: 200px;
}
</style>